

import React, { useState } from 'react';

import { Button, Modal, Form, Input, DatePicker, Rate, Select } from 'antd';
import "./Tousu.scss"
import Tousu_List from "../../../components/Response列表/Tousu_List"
import { useNavigate } from 'react-router-dom'
import * as service from "../../../api/index"



import { Selector, Space ,Toast,TextArea} from 'antd-mobile'

interface Props {

}
interface Shujv{
    headline:string
}
function Tousu(props: Props) {
    //选择组
    const options = [
        {
          label: '审批时间比较短',
          value: '审批时间比较短',
        },
        {
          label: '办理速度比较快',
          value: '办理速度比较快',
        },
        {
          label: '申请流程比较清晰',
          value: '申请流程比较清晰',
        },
        {
            label: '情形比较合理',
            value: '情形比较合理',
          },
      ]




    var navigate = useNavigate();
    const { Option } = Select;
    var [newarr,setnewarr]:any=useState()
    type SizeType = Parameters<typeof Form>[0]['size'];
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        var headline=values.headline
        var res=await service.Tousu_search(headline)
        console.log(res)
        setnewarr(res.data)
    };
    const { RangePicker } = DatePicker;
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const [form] = Form.useForm();
    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                break;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                break;
            case 'other':
                form.setFieldsValue({ note: 'Hi there!' });
                break;
            default:
        }
    };
  //跳转添加
    const add=()=>{
        navigate("/Tousuadd")
    }
    //保存id
    var set_id=1
    //设置某一条数据
    var [shujv, setShujv]:any = useState({});

    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = async (id:any) => {
    setIsModalOpen(true);
    console.log(id)
    set_id=id
    var res= await service.Tousu_xiangqig({id:id})
    setShujv(res.data)

   console.log(shujv)
 
  };
  var [xuanxiang, setxuanxiang]:any = useState([]);
  const handleOk = async () => {
    console.log(shujv)
    console.log(xuanxiang)
    

     var res = await service.Tousu_update({id:set_id,xuanxiang,xingji,textnav})
     console.log(res)
    setIsModalOpen(false);

  };

     //收集评价内容

     var [textnav,settextnav]:any=useState()
    const pingjiatext=(val:string)=>{
      textnav=val
      settextnav(textnav)
      console.log(textnav)
    }
     //收集星级
       //收集星级

       var [xingji,setxingji]:any=useState()
       const xingzhi=(val:number)=> {
         Toast.show(val.toString())
             xingji=val
             setxingji(xingji)
             console.log(xingji)
     }

  const handleCancel = () => {
    setIsModalOpen(false);
  };

    return (
        <div className='Guanli'>
          <div className='biaodan'>
          <Form
                    name="basic"
                    // labelCol={{ span: 8 }}
                    // wrapperCol={{ span: 16 }}
    
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="标题"
                        name="headline"
                       
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="type" label="类型">
                        <Select
                            placeholder="请选择"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="办件">办件</Option>
                            <Option value="账户">账户</Option>
                      
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="反馈人姓名"
                        name="name"
                      
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item name="states" label="状态" >
                        <Select
                            placeholder="请选择"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="待回复">待回复</Option>
                            <Option value="已回复">已回复</Option>
                            <Option value="交办中">交办中</Option>
                        </Select>
                    </Form.Item>
                 
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                          查询
                        </Button>
                        <Button type="primary" htmlType="submit">
                           重置
                        </Button>
                    </Form.Item>
                  

    
                </Form>
          </div>
             <div>
             <Button type="primary" onClick={add}>新增</Button>
               <Tousu_List Ff={showModal}  Newarr={newarr}  />      
               {/* Ff子组件调用父组件的方法，把方法给子组件传过去 */}
             </div>
             <>
  
      <Modal title="评价" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <div><span>标题：</span>{shujv&&shujv.headline}</div>
          <div><span>姓名：</span>{shujv&&shujv.name}</div>
          <div><span>电话：</span>{shujv&&shujv.phone}</div>
        <Selector
          columns={3}
          options={options}
          multiple={true}
          onChange={v => {
          xuanxiang = v
          setxuanxiang(v)
          console.log(xuanxiang)
        }}
        />
  
      <Rate   onChange={val =>xingzhi(val)}/>
      <div className='text'>
    <TextArea onChange={val => pingjiatext(val)} defaultValue={"写其他建议和意见"} showCount />
  </div>
      </Modal>
    </>
        </div>
    );
}

export default Tousu;